<template>
	<view style="z-index:2">
		<uni-drawer ref="showRight" mode="right" :width="drWidth">
			<view class="title">筛选</view>
			<scroll-view scroll-y class="scrollbox">
				<view class="scr_warp">
					<uni-collapse v-model="activeNames" @change="onChange" ref="collapse">
						<uni-collapse-item title="时间筛选" name="4">
							<view class="time_warp">
								<picker @change="changeStartTime" mode="date" fields="month">
									<view class="timebox">
										{{start_time ? start_time : '开始时间'}}
									</view>
								</picker>
								<view class="xian"></view>
								<picker @change="changeEndTime" mode="date" fields="month">
									<view class="timebox">
										{{end_time ? end_time : '结束时间'}}
									</view>
								</picker>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</scroll-view>
			<view class="screenbot">
				<view class="screenbtn" @click="reset">重置</view>
				<view class="screenbtn surebtn" @click="sure">确认</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import { netSelect } from '@/api/api.js'
	export default {
		props: {
			showScreen: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				drWidth: uni.upx2px(660),
				activeNames:[],
				//新增客户时间
				start_time:'',
				end_time:'',
			}
		},
		created() {
			let date = new Date()
			let year = date.getFullYear()
			let month = this.withData(date.getMonth() + 1)
			this.start_time = year+'-'+month
			this.end_time = year+'-'+month
		},
		methods: {
			open() {
				this.$refs['showRight'].open()
				this.init()
			},
			init() {
				this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
			},
			withData(param) {
			  return param < 10 ? '0' + param : '' + param;
			},
			changeStartTime(e) {
				this.start_time = e.detail.value
			},
			changeEndTime(e) {
				this.end_time = e.detail.value
			},
			reset() {
				this.start_time = ''
				this.end_time = ''
			},
			sure() {
				let params = {
					times:(this.start_time && this.end_time) ? (this.start_time+','+this.end_time) : '',
					startTime: this.start_time,
					endTime: this.end_time
				}
				this.$refs['showRight'].close()
				this.$emit('sureTwoQuery',params)
			},
			onChange(e) {
				this.activeNames = e
				this.init()
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		font-size:30rpx;
		color:#333333;
		padding:25rpx 34rpx;
	}
	.scrollbox{
		width:660rpx;
		height:calc(100vh - 210rpx);
		background:#fff;
		.scr_warp{
			width:660rpx;
			background:#fff;
			.listwarp{
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				align-items: center;
				.li{
					width:190rpx;
					height:60rpx;
					border-radius: 30rpx;
					font-size:30rpx;
					color:#0287FF;
					border:1rpx solid #0287FF;
					text-align: center;
					line-height: 58rpx;
					margin-right:20rpx;
					margin-bottom:20rpx;
					&:nth-child(3n){
						margin-right:0;
					}
				}
				.liactive{
					color:#fff;
					background:#0287FF;
				}
			}
			.address_warp{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:24rpx;
				border-top:1rpx solid #999999;
				border-bottom:1rpx solid #999999;
				.address_li{
					color:$uni-text-color;
				}
			}
			.time_warp{
				width:600rpx;
				margin:0 auto;
				padding:24rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				.timebox{
					width:216rpx;
					height:60rpx;
					border-radius: 10rpx;
					text-align: center;
					line-height: 58rpx;
					font-size:30rpx;
					color:$uni-text-color;
					border:1rpx solid $uni-text-color;
				}
				.xian{
					width:85rpx;
					height:7rpx;
					background:#999999;
					margin:0 20rpx;
				}
				.timeactive{
					background:$uni-text-color;
					color:#fff;
				}
			}
		}
	}
	.screenbot{
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		height:120rpx;
		padding-bottom:30rpx;
		.screenbtn{
			width: 229rpx;
			height: 60rpx;
			background: #FFFFFF;
			border: 1px solid #999999;
			border-radius: 10rpx;
			text-align: center;
			line-height: 60rpx;
			font-size:26rpx;
			color:#999;
		}
		.surebtn{
			border: 1px solid $uni-text-color;
			background:#fff;
			color:$uni-text-color;
		}
	}
</style>
